<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/homepage.css">
	<link rel="stylesheet" href="./css/base.css">
	<title>首页</title>
	<link rel="icon" href="./img/favicon.ico"/>
</head>
<body>
	<!-- 一楼 -->
	<div class="header">
	<div class="f1">
		<div class="container">
			<div class="row">
				<div class="col-1">
					<img src="img/210928004729927_188x50_4237.png" >
				</div>
				<div class="col-7">
					<ul>
						<li><a href="#">音乐</a></li>
						<li><a href="#">现场</a></li>
						<li><a href="vip.html">
						<img src="img/皇冠.png" >
						会员中心
						</a></li>
						<li><a href="fanxiang.html">凡响计划</a></li>
						<li><a href="#">客户端下载</a></li>
					</ul>
				</div>
				<div class="col-4">
					<input placeholder="搜索歌曲、歌手、MV">
					<img src="img/206搜索-线性.png" >
					<div>
					<img src="img/no-login.png" >
					<div class="log_popup">
						<p><span>一</span>登录后可专享<span>一</span></p>
						<div class="row">
							<div class="col-4">
								<img src="./img/乐谱编辑.png">
								<p>试听记录同步</p>
							</div>
							<div class="col-4">
								<img src="./img/彩铃.png">
								<p>订购酷炫铃音</p>
							</div>
							<div class="col-4">
								<img src="./img/无损音质.png">
								<p>下载无损音乐</p>
							</div>
						</div>
						<div class="row">
							<div class="col-6">
								<span class="lgin">登陆</span>
								</div>
							<div class="col-6">
								<span><a href="login.html">注册</a></span>
								</div>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 二楼 -->
	<div class="f2">
		<div class="container">
			<ul class="cur">
				<li><a href="#">首页</a></li>
				<li><a href="playlist.html">歌单</a></li>
				<li><a href="special-issue.html">专辑</a></li>
				<li><a href="hot.html">榜单</a></li>
				<li><a href="singer.html">歌手</a></li>
				<li><a href="crbt.html">彩铃</a></li>
				<li><a href="hardware.html">咪咕周边</a></li>
			</ul>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">演唱会</a></li>
				<li><a href="#">独家放送</a></li>
				<li><a href="#">MV</a></li>
			</ul>
		</div>
	</div>
	</div>
	<!-- 三楼 -->
	<div class="f3">
		<div class="container">
			<div class="box">
				<div id="imgbox">
					<img src="./img/220128092735971_1400x350_750.jpg">
					<img src="./img/220129092524315_1400x350_6535.jpg">
					<img src="./img/220128103617233_1400x350_4039.jpg">
					<img src="./img/220128221502307_1400x350_8698.jpg">
					<img src="./img/220128095033651_1400x350_6948.jpg">
					<img src="./img/220127093834954_1400x350_797.jpg">
				</div>
				<img id="left" src="./img/left2.png" >
				<img id="right" src="./img/向右2.png" >
			</div>
				<ul>
					<li data-dg='0' class="cur"></li>
					<li data-dg='60'></li>
					<li data-dg='120'></li>
					<li data-dg='180'></li>
					<li data-dg='240'></li>
					<li data-dg='300'></li>
				</ul>
		</div>
	</div>
	<!-- 四楼 -->
	<div class="f4">
		<div class="container">
			<div class="row">
				<img src="./img/220129162540818_201x90_8901.png">
				<img src="./img/220129162602471_214x91_2497.png">
				<img src="./img/22012916262366_203x90_6344.png">
				<img src="./img/220129162643207_202x90_1354.png">
			</div>
		</div>
	</div>
	<!-- 五楼 -->
	<div id="logincover">
		<div class="login-inter">
			<img src="./img/关闭.png" id="clo">
			<a href="login.html">去注册</a>
			<div class="row">
				<div class="cur" id="col">短信登录</div>
				<div id="col">密码登陆</div>
				<div id="col">SIM登录</div>
			</div>
			<div id="hint">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>手机号格式不正确</span>
				<span>手机号可用</span>
			</div>
			<div id="phon">
			<input placeholder="手机号">
			<div class="row">
				<div class="col-7">
					<input placeholder="请输入验证码"/>
				</div>
				<div class="col-5">
					<p>获取验证码</p>
				</div>
			</div>
			<p>登录</p>
			</div>
			<div id="pwd">
				<input placeholder="手机号/邮箱/用户名">
				<input placeholder="密码">
				<div id="sign">
						<div class="col">
							<input type="checkbox"/>
							<span>自动登录</span>
						</div>
						<div class="col">
							<span>忘记密码</span>
							<span>|</span>
							<a href="login.html">注册</a>
						</div>
				</div>
				<div id="tisi">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>密码长度在5~12位</span>
				<span>密码长度符合</span>
				</div>
				<p>登录</p>
				<span>手机号或密码不正确</span>
			</div>
			<div id="SIM">
				<input placeholder="手机号">
				<p>登录</p>
				<span>温馨提示：</span>
				<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
				<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
			</div>
			<div class="text">
				登录即同意<span>《咪咕用户服务协议》</span>
				和<span>《咪咕隐私权政策》</span>
			</div>
		</div>
	</div>
	<div class="f5">
		<div class="container">
			<p>歌单推荐</p>
			<div class="row">
				<div class="col-3">
						<div class="bcbox">
					<div class="box">
						<div class="imgbox">
							<img src="img/200618151935142_500x500_7541.jpg" >
							<span></span>
							<a id="login">立刻登录</a>
						</div>
							<span class="tit">专属歌单推荐</span>
							<span class="a"></span>
							<p>开启你的咪咕专属歌单</p>
						</div>
					</div>
				</div>
				<div class="col-9">
					<div class="row">
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/d7a.png">
									<div>
										<img src="./img/头戴耳机.png" >
										313.1w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>摇滚也温柔</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/a20c7fe6-b482-4faf-93e8-9d6b4d3a0da3.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										156.6w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>华语丨声线极具特色的..</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/876945e4-fa46-442a-838e-828eaf588a56.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										61.8w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>华语|付出甘之如饴</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/9b095e34-a494-4d72-97e6-c2f1efd25e7e.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										62.5w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>邓丽君|绝代佳人</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/6b2f1392-7ae9-47ef-9b9d-f3108d5110bd.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										76.4w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>勇气|心之所向 素履以往</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/6a3a1a0b-6c23-407c-8c54-46c2d3816dee.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										3.1w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>新春电音｜新年</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/ef4bf78e-b0c0-4846-8cc2-d8726a2409ed.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										180.9w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>抖音热歌 | 沉迷于抖音</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/4483b96c-35c2-42f9-844f-a09abe9de05a.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										461.8w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>复古风：回到华语乐坛</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/5853c06b-1141-49fd-aaad-12ce352b6a6d.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										54.9w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>那些会讲故事的钢琴曲</p>
							</div>
						</div>
						<div class="col">
							<div class="box">
								<div class="rotate-box">
								<div class="imgbox">
									<img src="./img/7db7def9-519d-4a27-8755-664bb5c0199a.jpg">
									<div>
										<img src="./img/头戴耳机.png" >
										75.7w
									</div>
								</div>
								<div class="play">
									<img src="img/8e09ec01529ead4b.png" >
									<img src="img/btn-play.png" >
								</div>
								<div class="pink-left"></div>
								<div class="pink-right"></div>
								</div>
								<p>欧美 | 婚礼专属喜讯连连</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 六楼 -->
	<div class="f6">
		<div class="container">
			<img src="img/21061717555372_1450x350_8740.png" >
		</div>
	</div>
	<!-- 七楼 -->
	<div class="f7">
				<ul>
					<li class="cur">华语</li>
					<li>欧美</li>
					<li>日韩</li>
				</ul>
		<div class="container-fluid">
		<div class="container">
			<div id="China" class="cur">
			<div class="row">
				<div class="col-4">
					<div class="row">
						<div class="col"><img src="./img/AS34fcace3779e2cec2544edfb60416b22.jpg"></div>
						<div class="col"><img src="./img/AS5516485e61af6ed22fce0aa4f6a8455d.jpg"></div>
						<div class="col"><img src="./img/AMc6c2ad29ff8996b31ab6d853c27a3b92.jpg"></div>
						<div class="col"><img src="./img/AM1fe03954b5b7cf58ca1664cfbf552ce9.jpg"></div>
						<div class="col"><img src="./img/AScac5e5c6134e289e3e0a06fd5a429be4.jpg"></div>
						<div class="col"><img src="./img/AS28e53152adb1c8b23e1a1538aa562c77.jpg"></div>
						<div class="cover">
							<span>新 歌 速 递</span>
							<p>全部播放</p>
						</div>
					</div>
				</div>
				<div class="col-8">
					<div class="row">
						<div class="col">
							<div class="imgbox">
								<img src="./img/AS34fcace3779e2cec2544edfb60416b22.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>平凡之路(电影《四海》伙伴的歌)</p>
								<p>韩寒/刘浩存/周琦/昨夜派对</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AS5516485e61af6ed22fce0aa4f6a8455d.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>陪你(电影《十年一品温如言》..</p>
								<p>余佳运</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AMc6c2ad29ff8996b31ab6d853c27a3b92.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>梦里啥都有之不做梦也能有</p>
								<p>腾格尔/洛天依</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AM1fe03954b5b7cf58ca1664cfbf552ce9.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>没有什么是听戏解决不了的(网..</p>
								<p>今晚打老虎/赖美云</p>
							</div>
							<span>04:05</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AScac5e5c6134e289e3e0a06fd5a429be4.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>为你喝彩</p>
								<p>孙楠/谭维维</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AS28e53152adb1c8b23e1a1538aa562c77.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>空洞(DJ版)</p>
								<p>林泽军/彭十六</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AMb846e6b82f1cfe767ff7ccf4a51f6b6c.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>向前跑(《奇迹·笨小孩》电影兴)</p>
								<p>周笔畅</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="col">
							<div class="imgbox">
								<img src="./img/AM6e25d5018c1bffbc41ee95907979dd3a.jpg" >
								<img src="img/btn-play.png" >
							</div>
							<div class="text">
								<p>西风的话+歌</p>
								<p>罗大佑</p>
							</div>
							<span>04:53</span>
							<div class="icon">
								<img src="img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
			<div id="EUROPE">
				<div class="row">
					<div class="col-4">
						<div class="row">
							<div class="col"><img src="./img/ASc578db1e1598b9af49076fb21da14c6d.jpg"></div>
							<div class="col"><img src="./img/ASaea3edfde15b591da2aca4da14e14b98.jpg"></div>
							<div class="col"><img src="./img/ASbbc6a3a55f24d81478ab76a365ca4e9d.jpg"></div>
							<div class="col"><img src="./img/ASddc7e710150efe2c7fffdde66d1b642e.jpg"></div>
							<div class="col"><img src="./img/AS0cf3b02eccaa27d49f3287bf82c7123d.jpg"></div>
							<div class="col"><img src="./img/AS8fb42489450f777360e25b51a496db07.jpg"></div>
							<div class="cover">
								<span>新 歌 速 递</span>
								<p>全部播放</p>
							</div>
						</div>
					</div>
					<div class="col-8">
						<div class="row">
							<div class="col">
								<div class="imgbox">
									<img src="./img/ASc578db1e1598b9af49076fb21da14c6d.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Running Back</p>
									<p>韦喆 / Sw3ed</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/ASaea3edfde15b591da2aca4da14e14b98.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Lagoon</p>
									<p>Rich Brian</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/ASbbc6a3a55f24d81478ab76a365ca4e9d.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Entertain Me</p>
									<p>Ylona Garcia</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/ASddc7e710150efe2c7fffdde66d1b642e.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Merry Christmas</p>
									<p>Ed Sheeran / Elton John</p>
								</div>
								<span>04:05</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/AS0cf3b02eccaa27d49f3287bf82c7123d.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Split</p>
									<p>NIKI / 88rising</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/AS8fb42489450f777360e25b51a496db07.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Bite Me(Clean)</p>
									<p>Avril Lavigne</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/AS4cfee6c34c3b742344c0906b3369e1be.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>The Weekend</p>
									<p>88rising / BIBI</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/AS4d84c31d1fae97ffc208a96a3ec9f35e.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Don't Go Changing</p>
									<p>Ylona Garcia / 88rising</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="kkc">
				<div class="row">
					<div class="col-4">
						<div class="row">
							<div class="col"><img src="./img/538a.jpg"></div>
							<div class="col"><img src="./img/83e9.jpg"></div>
							<div class="col"><img src="./img/37cc7d.jpg"></div>
							<div class="col"><img src="./img/6670b.jpg"></div>
							<div class="col"><img src="./img/a1.jpg"></div>
							<div class="col"><img src="./img/ad1bcc.jpg"></div>
							<div class="cover">
								<span>新 歌 速 递</span>
								<p>全部播放</p>
							</div>
						</div>
					</div>
					<div class="col-8">
						<div class="row">
							<div class="col">
								<div class="imgbox">
									<img src="./img/538a.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Damn Girl（feat. Jackson</p>
									<p>CRAZYBOY / 王嘉尔</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/83e9.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>Plus n Minus</p>
									<p>Yein</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/37cc7d.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>My Life</p>
									<p>Mark</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/6670b.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>LIE</p>
									<p>BM</p>
								</div>
								<span>04:05</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/a1.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>같이 걸어가줘요</p>
									<p>崔荣宰</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/ad1bcc.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>The Weekend (Remix)</p>
									<p>88rising / 347aidan / BIB</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/abc8.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>LAST BREATH</p>
									<p>Mark</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
							<div class="col">
								<div class="imgbox">
									<img src="./img/f0e028694.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<div class="text">
									<p>侧面</p>
									<p>李铢衔James</p>
								</div>
								<span>04:53</span>
								<div class="icon">
									<img src="img/爱心.png" >
									<img src="./img/1分享.png" >
									<img src="./img/铃铛.png" >
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	</div>
	<!-- 八楼 -->
	<div class="f8">
		<div class="container">
			<p>新碟上架</p>
			<div class="row">
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="img/AS8e6fc6fc69237b6f13e052b2770447b5.jpg" >
							<span>2022-1-31</span>
							</div>
						</div>
						<p>两只口罩</p>
						<p class="p2">郑钧</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AM1627aa1f18979748d5ad2791da680820.jpg" >
							<span>2022-1-27</span>
							</div>
						</div>
						<p>《淘金》影视原声带</p>
						<p class="p2">弦子 / 阿云嘎 / 刘小洋</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AM3b89097152a3bc4743ea0aad7dcbb8c6.jpg" >
							<span>2022-1-28</span>
							</div>
						</div>
						<p>时光音乐会 第14期</p>
						<p class="p2">时光音乐会</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AM47fa1acea19dc12336ee2c52f57dcd8b.jpg" >
							<span>2022-1-30</span>
							</div>
						</div>
						<p>五月天 好好好想见到你 Ma..</p>
						<p class="p2">五月天</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/ASd13843a3930e6fcfed8e82d540e473f8.jpg" >
							<span>2022-1-17</span>
							</div>
						</div>
						<p>《王牌部队》电视原声带</p>
						<p class="p2">群星</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/ASc3dc3a76db6d571d8f265044ac0a1319.jpg" >
							<span>2022-1-05</span>
							</div>
						</div>
						<p>生活万岁</p>
						<p class="p2">齐一</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/ASf349e7844ca81ec23fcab231096b7164.jpg" >
							<span>2022-1-20</span>
							</div>
						</div>
						<p>CLOCKWORK发条1.0</p>
						<p class="p2">周凯翔 / 仰昭光 / SOOVA</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/ASe76d75441d1f46b90cab5d56e69eb107.jpg" >
							<span>2022-1-18</span>
							</div>
						</div>
						<p>Three More Words</p>
						<p class="p2">李承铉</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 九楼 -->
	<div class="f9">
		<div class="container">
			<p>数字专辑</p>
			<div class="row">
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="img/AM8f4cdb709cddf9b19872c1082132d0fb.jpg" >
							<span>2022-1-25</span>
							<p>数字专辑</p>
							</div>
						</div>
						<p>冒险</p>
						<p class="p2">弗拉基米尔</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AM936abb19075d453619601e611f02a37e.jpg" >
							<span>2022-1-19</span>
							<p>数字专辑</p>
							</div>
						</div>
						<p>不真实场景</p>
						<p class="p2">庆怜</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AM6bad0bc942196d944b7a277aea3e9636.jpg" >
							<span>2022-1-09</span>
							<p>数字专辑</p>
							</div>
						</div>
						<p>Make it better</p>
						<p class="p2">SNH48许杨玉琢</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="imgbox">
							<div class="rotate-box">
								<img src="img/8e09ec01529ead4b.png" >
								<img src="img/btn-play.png" >
							</div>
							<div class="cont">
							<img src="./img/AMcd40b8e1da022fd6150d0d732b6b7100.jpg" >
							<span>2021-1-31</span>
							<p>数字专辑</p>
							</div>
						</div>
						<p>“想象”跨年音乐会（上半...</p>
						<p class="p2">朝简 / 窦唯</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 十楼 -->
	<div class="f10">
		<div class="container">
			<p>排行榜</p>
		</div>
	</div>
	<div class="f11">
		<div class="container-fluid">
		<div class="container">
			<div class="row">
				<div class="col-6">
					<div class="wrapper-left">
						<div class="img-box1">
							<img src="./img/20020512065402_360x360_2997.png" >
						</div>
						<div class="img-box2">
							<img src="img/200408163702795_360x360_1614.png" >
						</div>
						<div class="img-box3">
							<img src="./img/200408163640868_360x360_6587.png" >
						</div>
						<img class="left" src="./img/left2.png">
						<img class="right" src="./img/向右2.png">
						<div class="tit">
						<p class="p1">尖叫新歌榜</p>
						<p class="p2">每小时跟新</p>
						<div class="play">
							<img src="img/24gl-play1.png" >
							播放榜单
						</div>
						</div>
					</div>
				</div>
				<div class="col-6">
					<div class="wrapper-right">
						<div class="row">
							<div class="col-1">
								<p>01</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/ASf39f397d1a518f49b646db2f560d091a.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>这世界那么多人(2022央视春晚)</p>
								<span>03:10</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>02</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AS7171690a2c76d122d398dcbf46bc2ba0.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>雪花（电影《长津湖之水门桥》主..</p>
								<span>03:19</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>03</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="img/AM3b89097152a3bc4743ea0aad7dcbb8c6.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>这世界那么多人（《时光音乐会》</p>
								<span>05:00</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>04</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AMa348858f22faf7525a6b7ac0df8419fa.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>出场</p>
								<span>04:25</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>05</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AS404ad3de20810328db18c3af89a912ca.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>男二号</p>
								<span>04:47</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>06</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AM47fa1acea19dc12336ee2c52f57dcd8b.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>离开地球表面(live)</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>07</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AS9a2e66af48ad53dcc4028667417aaea3.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>Big Girl</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>08</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/AS1ce169e326bae19f9b64738d13ad412e.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>变成你身边的微风</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>09</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/ASc578db1e1598b9af49076fb21da14c6d.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>Running Back</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>10</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/ASf1871a73b99488067ccf6690094de206.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>因为你(电影《青春换日线》主题曲)</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>11</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/ASfd329517d420ecd97a043ddaa7e5f8f7.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>REACH THE SKY (中文)</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
						<div class="row">
							<div class="col-1">
								<p>12</p>
							</div>
							<div class="col-7">
								<div class="imgbox">
									<img src="./img/ASb0a913d9776a096ed117bba578cec58b.jpg" >
									<img src="img/btn-play.png" >
								</div>
								<p>Breakfast in the Bed</p>
								<span>03:46</span>
							</div>
							<div class="col-4">
								<img src="./img/爱心.png" >
								<img src="./img/1分享.png" >
								<img src="./img/铃铛.png" >
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	</div>
	<!-- 十一楼 -->
	<div class="f12">
		<div class="container">
			<p>音乐人</p>
			<div class="row">
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/200622175343688_none_7747.jpg">
					</div>
					<p>田燚</p>
				</div>
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/190906175749785_none_4023.jpg">
					</div>
					<p>孟子坤</p>
				</div>
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/211216133202546_none_1627.jpg">
					</div>
					<p>陈意涵Estelle</p>
				</div>
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/200222151248681_none_8046.jpg">
					</div>
					<p>马伯骞</p>
				</div>
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/201105090721324_none_4449.jpg">
					</div>
					<p>傻子与白痴</p>
				</div>
				<div class="col-2">
					<div class="imgbox">
						<img src="./img/200928145536477_none_1359.jpg">
					</div>
					<p>黄明昊 (Justin)</p>
				</div>
			</div>
		</div>
	</div>
	<!-- 十二楼 -->
	<div class="f13">
		<div class="container">
			<div class="row">
				<div class="col-9">
					<div class="row">
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕文化</a></li>
								<li><a href="#">咪咕文化官网</a></li>
								<li><a href="#">咪咕音乐简介</a></li>
								<li><a href="#">服务协议</a></li>
								<li><a href="#">隐私权政策</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕音乐</a></li>
								<li><a href="#">圈子彩铃</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">联系我们</a></li>
								<li><a href="#">业务合作</a></li>
								<li><a href="#">常见问题</a></li>
							</ul>
						</div>
						<p><img src="img/201012095135561_48x48_9661.png" ></p>
					</div>
				</div>
				<div class="col-3">
					<p>咪咕客户端</p>
					<div class="row">
						<div class="col-6">
							<img src="img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col-6">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
			</div>
				<div class="ending">
					<div class="ending-left">
						<span>蜀ICP备15012512号</span>
						<span>川网文[2019]2118-124</span>
						<span>网络视听许可证0112648号1</span>
						<span>增值业务许可证A2.B1.B2-2010000</span>
						<span>川公网安备 51010702002209号</span>
					</div>
					<p>Copyright © 2005 - 2022 咪咕音乐有限公司</p>
				</div>
		</div>
	</div>
	<script src="./jquery-3.6.0.js"></script>
	<script>
	var i=0
	let l=0
	var timer=setInterval(()=>{
		i+=60
		l++
		if(l>=6){
			l=0
		}
		imgbox.style=`transform: rotateY(${i}deg)`
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
	},5000)
	left.onclick=()=>{
		i-=60
		l--
		if(l<0){
			l=5
		}
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
		imgbox.style=`transform: rotateY(${i}deg);`
	}
	right.onclick=()=>{
		i+=60
		l++
		if(l>=6){
			l=0
		}
		imgbox.style=`transform: rotateY(${i}deg)`
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
	}
	login.onclick=()=>{
		logincover.style=`display: flex;`
	}
	const lgin=document.querySelector('.lgin')
	lgin.onclick=()=>{
		logincover.style=`display: flex;`
	}
	clo.onclick=()=>{
		logincover.style=`display: none;`
	}
	$('.f1 .container>.row>.col-4>div').mouseover(function(){
		$('.f1 .log_popup').stop(true).show(300)
	})
	$('.f1 .container>.row>.col-4>div').mouseleave(function(){
		$('.f1 .log_popup').stop(true).hide(300)
	})
	$('.login-inter>div>input:first-child').on('input',function(){
			if($(this).val()==''){
				$('#hint').prop('class','')
				return
			}
		if(/^1[3-9]\d{9}$/.test($(this).val())){
			$('#hint').prop('class','ok')
		}else{
			$('#hint').prop('class','err')
		}
	})
	$('.login-inter>div>input:first-child').blur(function(){
		$('#hint').prop('class','')
	})
	$('#pwd>input:nth-of-type(2)').on('input',function(){
		const l=$(this).val()
		if(l==''){
			$('#tisi').prop('class','')
			return
		}
		if(l.length>12 || l.length<5){
			$('#tisi').prop('class','err')
		}else{
			$('#tisi').prop('class','ok')
		}
	})
	$('#pwd>input:nth-of-type(2)').blur(function(){
		$('#tisi').prop('class','')
	})
	// $('#pwd>p').click(function(){
	// 	let p=$('#pwd>input:first-child').val()
	// 	let w=$('#pwd>input:nth-of-type(2)').val()
	// 	let xhr=new XMLHttpRequest()
	// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
	// 	xhr.send()
	// 	xhr.onload=()=>{
	// 		console.log(xhr.responseText)
	// 		if(xhr.responseText=='err'){
	// 			$('#pwd>span').prop('class','err')
	// 		}
	// 	}
	// })
	$('.login-inter>.row').on('click','div',function(){
		$(this).addClass('cur').siblings().removeClass('cur')
		if($(this).text()=='短信登录'){
			phon.style.display=''
			pwd.style.display='none'
			SIM.style.display='none'
		}
		if($(this).text()=='密码登陆'){
			phon.style.display='none'
			pwd.style.display='block'
			SIM.style.display='none'
		}
		if($(this).text()=='SIM登录'){
			phon.style.display='none'
			pwd.style.display='none'
			SIM.style.display='block'
		}
	})
	$('.f3 ul').on('mouseover','li',function(){
		$(this).prop('class','cur')
		$(this).siblings().prop('class','')
		const dg=$(this).data().dg
		imgbox.style=`transform: rotateY(${dg}deg)`
	})
	$('.f7 ul').on('click','li',function(){
		$(this).prop('class','cur').siblings().prop('class','')
		if($(this).text()=='欧美'){
			$('#EUROPE').prop('class','cur').siblings().prop('class','')
		}
		if($(this).text()=='日韩'){
			$('#kkc').prop('class','cur').siblings().prop('class','')
		}
		if($(this).text()=='华语'){
			$('#China').prop('class','cur').siblings().prop('class','')
		}
	})
	$('.header').on('mouseover','a',function(){
			if($(this).text()=='现场'){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
			}
			if($(this).text()=='音乐'){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
			}
		})
		$('.header').mouseleave(function(){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
		})
	</script>
</body>
</html>
